<template>
  <el-dialog
    title="新增保护"
    :visible.sync="isShowModel"
    :before-close="handleClose"
    @close="$emit('update:isShowDetail', false)"
    class="changePassword">
    <el-form :model="detailInfo" label-width="120px" :rules="rules" ref="detailInfo">
      <el-form-item label="选择供应商：" prop="supplyId" required>
        <el-select v-model="detailInfo.supplyId" filterable clearable placeholder="全部" @focus="getSupplyList">
          <el-option v-for="item in supplyList"
                     :key="item.id"
                     :label="item.enterpriseName"
                     :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="绑定采购商：" prop="merchantId" required>
        <el-select v-model="detailInfo.merchantId" filterable clearable placeholder="全部" @focus="getMerchantList">
          <el-option v-for="item in merchantList"
                     :key="item.id"
                     :label="item.enterpriseName"
                     :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeModel">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
    export default {
        name: "AddProtect",
        props: {
          isShowDetail: {
            type: Boolean,
            default: false
          }
        },
        data() {
          return {
            detailInfo: {
              supplyId: "",
              merchantId: ""
            },
            supplyList: [],
            merchantList: [],
            isShowModel: this.isShowDetail,
            rules: {
              supplyId: [
                { required: true, message: '供应商不能为空', trigger: ['change', 'blur'] },
              ],
              merchantId: [
                { required: true, message: '采购商不能为空', trigger: ['change', 'blur'] },
              ]
            }
          }
        },
        methods: {
          closeModel() {
            this.resetForm()
            this.$emit('update:isShowDetail', false)
          },
          resetForm() {
            this.$refs['detailInfo'].resetFields()
          },
          handleClose(done) {
            this.resetForm()
            done()
          },
          submitForm() {
            this.$refs['detailInfo'].validate((valid) => {
                if (valid) {
                  ajax.post(apis.setting.addProtect, this.detailInfo).then(res => {
                    if(res.code == "10000000") {
                      this.$message({
                        type: 'success',
                        message: '新增保护成功!'
                      });
                      this.$emit('fresh')
                      this.closeModel()
                    } else {
                      this.$message.error(res.message)
                    }
                  })
                }
            })
          },
          getSupplyList() {
            ajax.post(apis.setting.getSupplyList).then(res => {
              if(res.code == "10000000") {
                this.supplyList = res.data;
              }
            })
          },
          getMerchantList() {
            ajax.post(apis.setting.getMerchantList).then(res => {
              if(res.code == "10000000") {
                this.merchantList = res.data;
              }
            })
          }
        },
        watch: {
          isShowDetail(val) {
            this.isShowModel = val;
          }
        }
    }
</script>

<style scoped>

</style>
